	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>新疆汽配网后台</title>
		<link rel="stylesheet" href="/Public/layui/css/layui.css">
		<style type="text/css">
		    #demo2,#demo3{
				overflow:auto;
			}
		    #demo2 .imgs,#demo3 .imgs{
		    	height:50px !important; margin:10px; position:relative; float:left;
		    }
		    #demo2 .imgs img,#demo3 .imgs img{
		    	height:50px !important;
		    }
		    #demo2 .imgs .baca,#demo3 .imgs .baca{
		    	position:absolute;color:red;right:0;top:0;width:5px; height:5px;
		    	cursor:pointer;
		    }

		</style>
	</head>
	<body>
		 <!--添加商品表单-->
	  <div id="add_car" style=" padding:20px;">
			<form class="layui-form">
				<div class="layui-inline">
			      <label class="layui-form-label">品牌选择框</label>
			      <div class="layui-input-inline" style="margin-bottom: 20px;">
			        <select name="cartypeid" lay-verify="required" lay-search="">
			        	<volist name="typename" id="vo">
						<option value="{$vo.id}" <if condition="$vo.checked eq 1"> selected="selected" </if>>{$vo.name}</option>
						</volist>
			        </select>
			      </div>
			    </div>

				<div class="layui-form-item">
					<label class="layui-form-label">品牌厂商：</label>
					<div class="layui-input-block">
						<input type="text" name="logoname" id="logoname" value="" lay-verify="required" placeholder="请输入厂商" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">汽车名称：</label>
					<div class="layui-input-block">
						<input type="text" name="carname" id="carname" value="" lay-verify="required" placeholder="请输入名称" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">类型所属：</label>
					<div class="layui-input-block">
						<input type="text" name="tagging" id="tagging" value="" lay-verify="required" placeholder="请输入类型" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">汽车价格：</label>
					<div class="layui-input-block">
						<input type="text" name="carpirce" id="carpirce" value="" lay-verify="required" placeholder="请输入价格" class="layui-input">
					</div>
				</div>

				<div class="layui-upload">
				  <label class="layui-form-label">汽车图片</label>
				  <button type="button" class="layui-btn" id="test1">上传图片</button>
				  <div class="layui-upload-list" style="padding-left: 110px;">
				    <img class="layui-upload-img" id="demo1" src="" style="width: 105px;height: 105px;">
				  </div>
				</div> 

				<div class="layui-upload" style="margin-left: 110px;">
					<label style="margin-left: -110px;" class="layui-form-label">轮播图：</label>
			        <button type="button" class="layui-btn" id="test3">轮播图上传</button> 
			        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			          预览图：
			          <div class="layui-upload-list" id="demo3">
			       
			          </div>
			       </blockquote>
			    </div>

			    <div class="layui-form-item">
					<label class="layui-form-label">汽车保值：</label>
					<div class="layui-input-block">
						<input type="text" name="carbaozhi" id="carbaozhi" value="" lay-verify="required" placeholder="请输入保值" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">汽车排名：</label>
					<div class="layui-input-block">
						<input type="text" name="carranking" id="carranking" value="" lay-verify="required" placeholder="请输入排名" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item layui-form-text">
				    <label class="layui-form-label">文章编辑：</label>
				    <div class="layui-input-block">
				      <textarea name="content" id="content"></textarea>
				    </div>
			    </div>

				<div class="layui-upload" style="margin-left: 110px;">
					<label style="margin-left: -110px;" class="layui-form-label">相册图片：</label>
			        <button type="button" class="layui-btn" id="test2">多图片上传</button> 
			        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			          预览图：
			          <div class="layui-upload-list" id="demo2">
			          		
			          </div>
			       </blockquote>
			    </div>

			     <hr class="layui-bg-black">
			    <div class="layui-form-item">
				    <label class="layui-form-label">绑定店家：</label>
				    <div class="layui-input-block">
				    	<p id="p1">
				    		<volist name="shop" id="pa">
					    		<input type="checkbox" name="shop_id[]" value="{$pa.id}" title="{$pa.shop_company}" <if condition="$pa.checked eq 1"> checked="checked" </if>>
					    	</volist>
				    	</p>
				    </div>
				</div>

			    <div class="layui-form-item" style="margin-top:20px;">
					<div class="layui-input-block">
						<button  class="layui-btn" class="layui-btn" lay-submit lay-filter="insert">保存</button>
					</div>
				</div>
			</form>
		</div>
		<script src="/Public/layui/layui.all.js"></script>
		<script charset="utf-8" src="/Public/kind/kindeditor-all-min.js"></script>
		<script type="text/javascript">
			var imgs = [];
			var logo ="";
			var license = [];
			var editor;
			//文本编辑器
			  KindEditor.ready(function(K) {
			    editor = K.create('textarea[name="content"]', {
			      	allowFileManager : true
			    });
			  });
	  		//普通图片上传
	  		upload.render({
	    		elem: '#test1',
	    		url: '/Admin/GoodsCarType/car_ico',
	    		before: function(obj){
	      			//预读本地文件示例，不支持ie8
		        obj.preview(function(index, file, result){
		       		 $('#demo1').attr('src', result); //图片链接（base64）
		      		});
		    	},
		    	done: function(res){
		    		logo = res.src;
		    		layer.msg(res.msg);
	    		}
			})
			//多图片上传
			upload.render({
				elem: '#test2',
				url: '/Admin/GoodsCarType/uploadImage',
				multiple: true,
				before: function(obj){
					
				},
				done: function(res){
					imgs.push(res.data.src);
					var resrc = res.data.src.replace(/\./g, "").replace(/\//g, "").replace(/\_/g, "");
					var html = 
					'<div class="imgs" id="'+resrc+'">'+
						'<img src="'+res.data.src+'" class="layui-upload-img" >'+
						'<div class="baca" onclick=del_img("'+res.data.src+'")>X</div>'+
					'</div>';
					$('#demo2').append(html);
					layer.msg("添加成功");
				}
			});
			//轮播图上传
			upload.render({
				elem: '#test3',
				url: '/Admin/GoodsCarType/broadcastImage',
				multiple: true,
				before: function(obj){
					
				},
				done: function(res){
					license.push(res.data.src);
					var resrc = res.data.src.replace(/\./g, "").replace(/\//g, "").replace(/\_/g, "");
					var html = 
					'<div class="imgs" id="'+resrc+'">'+
						'<img src="'+res.data.src+'" class="layui-upload-img" >'+
						'<div class="baca" onclick=del_license("'+res.data.src+'")>X</div>'+
					'</div>';
					$('#demo3').append(html);
					layer.msg("添加成功");
				}
			});


		   //用户修改提交
			form.on('submit(insert)', function(data){
				var html = editor.html(); // 取得HTML内容 
				data.field.logo = logo;		//汽车logo
				data.field.broadcast = license;	//汽车轮播
				data.field.images = imgs;		//汽车相册
				data.field.html=html;
				var param=data.field;
				console.log(param);
				ajax('/Admin/GoodsCarType/insert',param,function(res){
					layer.msg(res.msg);
					window.location.href="/Admin/GoodsCarType/index"
				})
				return false; //阻止表单跳转
			});

			//删除多张图片
			function del_img(id){
				var resrc = id.replace(/\./g, "").replace(/\//g, "").replace(/\_/g, "");
				for (var i = 0; i < imgs.length; i++) {
					if(imgs[i] == id){
						imgs.splice(i,1);			//splice(删除项目的位置,删除x项目数量) 方法向/从数组中添加/删除项目，然后返回被删除的项目。
						$('#'+resrc).remove();
					}
				}
				console.log(imgs);
			}
			//删除多张轮播图片
			function del_license(id){
				var resrc = id.replace(/\./g, "").replace(/\//g, "").replace(/\_/g, "");
				for (var i = 0; i < license.length; i++) {
					if(license[i] == id){
						license.splice(i,1);			//splice(删除项目的位置,删除x项目数量) 方法向/从数组中添加/删除项目，然后返回被删除的项目。
						$('#'+resrc).remove();
					}
				}
				console.log(license);
			}
		</script>
	</body>
	</html>